<section class="content-header" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
         xmlns:th="http://www.thymeleaf.org">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">客户管理crm</a></li>
        <li class="active">目标客户</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="custName">用户名:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="custName">

                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="custLevel">客户等级:</label>
                    <div class="col-xs-8">
                        <!--                        <input type="text" class="form-control" id="custLevel">-->
                        <select name="custLevel" id="custLevel" class="form-control m-b">
                            <option value="0">所有客户</option>
                            <option value="1">新客</option>
                            <option value="2">熟客</option>
                            <option value="3">老客</option>
                            <option value="4">会员</option>
                            <option value="5">大会员</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <label class="control-label  col-xs-4" for="custStatus">客户状态:</label>
                    <div class="col-xs-8">
                        <select name="custStatus" id="custStatus" class="form-control m-b">
                            <option value="0">所有客户</option>
                            <option value="1">无单客户</option>
                            <option value="2">有单客户</option>
                        </select>
                    </div>
                </div>
                <shiro:hasPermission name="customer:list">
                    <div class="col-md-1 col-sm-6 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">

            <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#userModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>

        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 用户新增模态框 -->
<div id="userModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!--        user新增按钮页面-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="CustomerForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户名 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="custName" class="form-control" min="3" require="必填项" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户姓名 :</label>
                            <div class="col-sm-8">
                                男:<input  name="custGender" checked type="radio" value="男">
                                女:<input  name="custGender" type="radio" value="女">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户地区 :<span style="color: #ff0000">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="custRegion" type="text" class="form-control" min="3" require="必填项"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户经理编号 :</label>

                            <div class="col-sm-8">
                                <input name="custManangerId" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户经理姓名 :</label>

                            <div class="col-sm-8">
                                <input name="custManangerName" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户等级 :<span
                                    style="color: #ff0000">*</span>:</label></label>

                            <div class="col-sm-8">
                                <select name="custLevel" id="custLevel2" class="form-control m-b">
                                    <option value="1">新客</option>
                                    <option value="2">熟客</option>
                                    <option value="3">老客</option>
                                    <option value="4">会员</option>
                                    <option value="5">大会员</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户等级描述 :</label>

                            <div class="col-sm-8">
                                <input name="custLevelLabel" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户满意度 :</label>

                            <div class="col-sm-8">
                                <select name="custSatisfy" id="custSatisfy" class="form-control m-b">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户信用度 :</label>

                            <div class="col-sm-8">
                                <select name="custCredit" id="custCredit" class="form-control m-b">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户地址 :</label>

                            <div class="col-sm-8">
                                <input name="custAddress" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户电话 :</label>
                            <div class="col-sm-8">
                                <input name="custTel" class="form-control" placeholder="">
                            </div>
                        </div>


                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveCustomer" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--新增订单-->
<div id="userModal2" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">创建订单</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="CustomerDetailForm2" xmlns:th="http://www.w3.org/1999/xhtml">
                    <!--                    <input class="hidden" name="custId" th:value="${customer.custId}">-->
                    <div class="box-body">
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">客户编号 :</label>

                            <div class="col-sm-8">
                                <input name="odrCustId" class="form-control" placeholder="" id="odrCustId">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">客户名称 :</label>

                            <div class="col-sm-8">
                                <input name="odrCustName" class="form-control" placeholder="" id="odrCustName">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单所在地址 :</label>

                            <div class="col-sm-8">
                                <input name="odrAddress" class="form-control" placeholder="" id="odrAddress">
                            </div>
                        </div>
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">产品编号 :</label>
                            <div class="col-sm-8">
                                <input name="oddProdId" id="oddProdId" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品 :</label>
                            <div class="col-sm-8" id="writeUser">

                            </div>
                        </div>
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">产品价格 :</label>
                            <div class="col-sm-8">
                                <input name="oddPrice" id="oddPrice" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品数量 :</label>
                            <div class="col-sm-8">
                                <input name="oddCount" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveDetailCustomer2" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                    <!-- /.box-footer -->
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 用户详情模态框 -->
<div id="userDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" style="text-align: center">用户信息</h4>
            </div>
            <div class="modal-body">
                <div id="userOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    var editFlag = "[[${@perms.hasPerm('customer:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('customer:delete')}]]";
    var cstOrder = "[[${@perms.hasPerm('cstOrder:list')}]]"
    var addOrder = "[[${@perms.hasPerm('customer:edit2')}]]"
    // var assignRoleFlag="[[${@perms.hasPerm('customer:assignRole')}]]";
    var IdStr;//批量用户id
    var selectRoleIds;
    var customerIdChecked;
    var loadRoleCount = 0;
    var columns = [
        {checkbox: true},
        {
            field: 'custName',
            title: '用户名',
            align: "center"
        },

        {
            field: 'custManangerName',
            title: '客户经理姓名',
            align: "center"
        },
        {
            field: 'custLevel',
            title: '客户等级',
            align: "center",
            formatter: function (value,
                                 row, index) {
                if (row.custLevel == 1) {
                    return "新客"
                } else if (row.custLevel == 2) {
                    return "熟客"
                } else if (row.custLevel == 3) {
                    return "老客"
                } else if (row.custLevel == 4) {
                    return "会员"
                } else if (row.custLevel == 5) {
                    return "大会员"
                }
            }
        },
        {
            field: 'custAddress',
            title: '客户地址',
            align: "center"
        },
        {
            field: 'custGender',
            title: '性别',
            align: "center"
        },
        {
            field: 'custTel',
            title: '客户电话',
            align: "center"
        },
        {
            field: 'custSatisfy',
            title: '客户满意度',
            align: "center"
        },
        {
            field: 'custCredit',
            title: '客户信用度',
            align: "center"
        },
        {
            field: 'custOrderNum',
            title: '订单',
            align: "center",
            formatter: function (value,
                                 row, index) {
                var custName = row.custName
                if (row.custOrderNum > 0) {
                    var custOrder = cstOrder == "true" ? "<a class='table-btn table-btn-info' href='#cstOrder'   onclick='tiaozhuan(" + row.id + ",\"" + row.custName + "\")' >有订单</a>" : "";
                    return custOrder
                } else {
                    var custOrder = cstOrder == "true" ? '<a  class="table-btn table-btn-success" href="javascript:void(0)" onclick="tiaozhuan2()">无订单</a>' : '';
                    return custOrder
                }
            }
        },
        {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value, row, index) {
                var edit = editFlag == "true" ? '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editUser(' + row.id + ')">编辑</a>' : '';
                var del = deleteFlag == "true" ? '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteUser(' + row.id + ')">删除</a>' : '';
                var edits = addOrder == "true" ? "<a class='table-btn table-btn-info' href='javascript:void(0)' onclick='insert(\"" + row.custId + "\",\"" + row.custName + "\",\"" + row.custAddress + "\")'>生成订单</a>" : '';
                return edit + del + edits;
            }
        }];
    var options = {
        id: "#table",
        url: '/customer/list',
        columns: columns,
        // toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);
    /*查询用户参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            custName: $("#custName").val(),
            custLevel: $("#custLevel").val(),
            custStatus: $("#custStatus").val()
        };
        return temp;
    }
    /*查询角色参数*/
    function queryRoleParams(params) {
        var temp = {
            id: customerIdChecked
        };
        return temp;
    }
    /*编辑*/
    function editUser(id) {
        Core.load("#userOpenWindow", "/customer/edit?id=" + id, function () {
            $("#userDetailModal").modal("show");
        }, 2);
    }
    function tiaozhuan(id, custName) {
        Core.confirm("是否跳转到订单？", function () {
            paramss = {
                //客户表  销售机会表
                odrCustId: id,
                odrCustName: custName,
                limit: 10, //页面大小
                offset: 0, //页码
            }
            // alert(paramss)
            window.location.href = "/index#cstOrder?odrCustId=" + id + "&odrCustName=" + custName;
        })
    }
    function tiaozhuan2() {
        Core.confirm("抱歉您目前没有订单!", function () {
            Core.refreshTable("#table");
        })
    }
    /*删除*/
    function deleteUser(id) {
        Core.confirm("确定删除该用户？", function () {
            Core.postAjax("/customer/delete", {"id": id}, function (data) {
                if (data.status == 200) {
                    Core.refreshTable("#table");
                    layer.msg(data.msg);
                }else{
                    layer.msg(data.msg);
                }
            }, "get")
        })
    }

    $(function () {
        /*新增订单*/
        insert = function(id, custName, custAddress) {
            if ( custAddress == "null" || custAddress == "" || custAddress == null){
                layer.msg("客户信息不全!请先将信息填补完成");
                // Core.load("#userOpenWindow", "/customer/edit?id=" + id, function () {
                //     $("#userDetailModal").modal("show");
                // }, 2);
            }else{
                $("#odrCustId").val(id);
                $("#odrCustName").val(custName);
                $("#odrAddress").val(custAddress);
                getUserInfo();
                $("#userModal2").modal("show");
            }
        }
        // 保存新增订单
        $("#saveDetailCustomer2").click(function(){
            let array = $("#yhId").val().split("|");
            if (array[0] > 0) {
                $("#oddProdId").val(array[0]);
                $("#oddPrice").val(array[1]);
                console.log($("#CustomerDetailForm2").serialize());
                var CustomerDetailForm2 = $("#CustomerDetailForm2").serialize();
                Core.postAjax("/cstOrder/insert", CustomerDetailForm2, function (data) {
                    console.log(data)
                    $("#userModal2").modal("hide");
                    clear("#userModal2");
                    Core.refreshTable("#table");
                })
            }
        })
        //查询
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });
        //用户信息下拉框
        const getUserInfo = function () {
            var test = ""
            var params = {
                prodName: "",
            }
            Core.postAjax("/product/lists", params, function (data) {
                console.log(data.data);
                console.log(data.data[0].prodName,data.data[0].prodId);
                var product = data.data;
                test = "<select class=\"form-control\" id=\"yhId\" name=\"yhId\"><option value='0'>请选择</option>";
                for (var i = 0; i < product.length; i++) {
                    test = test + "<option value='" + product[i].prodCode  +"|" + product[i].prodPrice  +"'>"+ product[i].prodName + "</option>";
                }
                test = test + "</select>";
                $("#writeUser").text("");
                $("#writeUser").append(test);
            })
        }
        //增加
        $("#btn_add").click(function () {
            Core.clearError("#CustomerForm");
        });
        /*批量删除*/
        $("#btn_batch_delete").click(function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                    IdStr = "";
                    $.each(checkedRows, function (i, item) {
                        IdStr += (item.id + ",");
                    })
                    IdStr = IdStr.substring(0, IdStr.length - 1);
                    Core.postAjax("/customer/batch/delete", {"IdStr": IdStr}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    }, "get")
                })
            }
        });
        /*保存用戶*/
        $("#saveCustomer").click(function () {
            if (doValidForm(CustomerForm)) {
                Core.mask("#saveCustomer");
                Core.postAjax("/customer/add", $("#CustomerForm").serialize(), function (data) {
                    Core.unmask("#saveCustomer");
                    if (data.status == 200) {
                        $("#userModal").modal("hide");
                        $("#CustomerForm")[0].reset();
                        Core.refreshTable("#table")
                    }
                    layer.msg(data.msg);
                })
            };
        });
    //    清楚form表单里面的数据
        function  clear(modal) {
          $(modal).find("form").trigger("reset")
        }
    });

</script>